<template>
  <div>
    <vue-element-loading :active="loading" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
    <div>
      <el-row class="el-cardal">
        <div v-if="activeName!='fourth'">
          <el-col :xs="6" :sm="4" :md="4" :lg="2" :xl="2">
            <img :src="gameData.gameVO.icon"
                 style="width: 70px; height: 70px; margin-right: 20px !important;">
          </el-col>
          <el-col :xs="18" :sm="16" :md="16" :lg="20" :xl="20">
            <div @click="hand">
              <div>{{ gameData.gameVO.gameName }}</div>
              <div class="dialogtitle">
                {{ gameData.gameVO.synopsis }}
              </div>
              <div class="dialogtitle">
                <span>平台:{{ osTypeName(gameData.gameVO.osType) }}</span> &nbsp;&nbsp;
                <span> 版本:{{ gameData.gameVO.version }}</span>&nbsp;&nbsp;
                <span>大小:{{ conversionByte(gameData.gameVO.gameSize) }}</span>&nbsp;&nbsp;
                <span> 游戏类型:{{ gameData.gameVO.softTypeName }}</span>&nbsp;&nbsp;
                <span style="color: red" v-if="gameData.gameVO.changeTime!=0"> 分包日期:{{ gameData.gameVO.changeTime | formatDate('YYYY-MM-DD HH:mm:ss')  }}</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="4" :md="4" :lg="2" :xl="2">
            <div
              style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;margin-top: 12%;">
              <el-button type="info" v-if="gameData.have" disabled>已添加</el-button>
              <el-button type="primary" v-else @click="addGameSourcePromoteHandle">添加</el-button>

            </div>
          </el-col>
        </div>

        <!--    我的游戏-->
        <div v-else>
          <el-col :xs="6" :sm="4" :md="4" :lg="2" :xl="2">
            <img :src="gameData.gameVO.icon"
                 style="width: 70px; height: 70px; margin-right: 20px !important;">
          </el-col>
          <el-col :xs="18" :sm="12" :md="12" :lg="11" :xl="11">
            <div @click="hand">


              <div>{{ gameData.gameVO.gameName }}</div>
              <div class="dialogtitle">
                {{ gameData.gameVO.synopsis }}
              </div>
              <div class="dialogtitle">
                <span>平台:{{ osTypeName(gameData.gameVO.osType) }}</span> &nbsp;&nbsp;
                <span> 版本:{{ gameData.gameVO.version }}</span>&nbsp;&nbsp;
                <span>大小:{{ conversionByte(gameData.gameVO.gameSize) }}</span>&nbsp;&nbsp;
                <span> 游戏类型:{{ gameData.gameVO.softTypeName }}</span>&nbsp;&nbsp;
                <span style="color: red" v-if="gameData.gameVO.changeTime!=0"> 分包日期:{{ gameData.gameVO.changeTime | formatDate('YYYY-MM-DD HH:mm:ss')  }}</span>
              </div>
            </div>
          </el-col>
          <!--    按钮-->
          <el-col :xs="24" :sm="8" :md="8" :lg="11" :xl="11">
            <div
              style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: flex-end;margin-top: 5%;">
              <el-link style="margin-left: 20px" type="info" @click.stop v-if="gameData.approvalStat===1">待授权推广
              </el-link>
              <el-popover
                v-if="gameData.approvalStat===1"
                placement="top"
                width="360"
                trigger="hover"
                content="禁止返利推广,上交易平台,推广商需联系市场手动开通推广">
                <img slot="reference" style="width: 14px;height: 14px" src="../../assets/icons/problem.png">
              </el-popover>


              <el-link style="margin-left: 20px" type="danger"
                       v-if="gameData.subpackage==1 && gameData.approvalStat===2"
                       @click="subcontractGameSourcePromoteHandle">申请分包
              </el-link>
              <el-link style="margin-left: 20px" type="danger"
                       v-if="gameData.subpackage==3 && gameData.approvalStat===2"
              >正在分包...
              </el-link>
              <el-link style="margin-left: 20px" type="danger"
                       v-if="gameData.subpackage==2 && gameData.versionId !== gameData.gameVO.versionId"
                       @click="subcontractGameSourcePromoteHandle">重新分包
              </el-link>
              <el-link style="display:none;margin-left: 20px" type="primary" @click.stop="dialogTableVisible = true"
                       v-if="gameData.subpackage==2" @click="url=downloadUrl+gameData.code">下载链接
              </el-link>

              <el-popover placement="right" title popper-class="popperclassbig" trigger="hover"
                          v-if="gameData.subpackage==2">
                <el-image
                  style="width: 213px; "
                  :src="gameData.gameVO.introduPageImg"
                ></el-image>
<!--                <el-link slot="reference" style="margin-left: 20px" type="danger"-->
<!--                         @click="url = gameData.gameVO.introduPageUrl  + encodeBase64(downloadUrl+gameData.code) "  @click.stop="dialogTableVisible = true">落地页链接-->
<!--                </el-link>-->
                <el-link slot="reference" style="display:none;margin-left: 20px" type="danger"
                         @click="getUrl()">落地页链接
                </el-link>
              </el-popover>

              <el-link style="margin-left: 20px;color: #00a680;" type="danger"
                       v-if="gameData.subpackage==2"
                       @click="getSXUrl()">生成落地页链接（带时效）
              </el-link>

              <el-link style="margin-left: 20px;color: #00a680;" type="danger"
                       v-if="gameData.subpackage==2"
                       @click="setSX()">链接时效设置
              </el-link>

              <el-link style="margin-left: 20px" type="primary" @click.stop="open">下架</el-link>
            </div>
          </el-col>
        </div>
      </el-row>
    </div>

    <el-dialog :visible.sync="dialogFormll" :append-to-body="true" :fullscreen="true">
      <div class="dialog-box">
        <el-row class="dialog-boxone">
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <img src="https://fileks.mushao.com/GameFile/GameIcon/20210616/e1d00be4b1134b24bce18d710baf95c2.png"
                 style="width: 144px; height: 144px; margin-right: 20px !important;">
          </el-col>
          <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
            <div class="boxdialog">
              <div>
                <span style="font-weight: bold;font-size: 24px;">{{ gameData.gameVO.gameName }}</span>0
              </div>
              <div>
                <span class="dialog-boxonetext"
                      style="margin-left: 0"> 版本：{{ gameData.gameVO.version }} </span>
                <span class="dialog-boxonetext"> 类型：{{ gameData.gameVO.softTypeName }} </span>
                <span class="dialog-boxonetext"> 大小：{{ conversionByte(gameData.gameVO.gameSize) }}</span>
                <span
                  class="dialog-boxonetext"> 更新时间：{{
                    this.$moment(gameData.gameVO.changeTime).format('LL')
                  }}</span>
              </div>
              <div>
                <span class="dialog-boxonetab"
                      v-for="(item,index) in splitLabel(gameData.gameVO.label, ';')"
                      :key="index">{{ item }}</span>
              </div>

            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px" gutter="20">
          <el-col :span="15">
            <el-row class="dialog-boxtwo">
              <div style="padding: 20px">
                <span class="dialog-title">游戏简介</span>
              </div>
              <div style="width:100%;height: 1px;background-color: #E9E9EA"></div>
              <div style="padding: 20px">
                  <span
                    class="dialog-liteletitle">{{ gameData.gameVO.introduction }}</span>
              </div>
            </el-row>
            <el-row class="dialog-boxtwo" style="margin-top: 20px">
              <div style="padding: 20px">
                <span class="dialog-title">游戏截图</span>
              </div>
              <div style="width:100%;height: 1px;background-color: #E9E9EA"></div>
              <div style="padding: 20px">
                <el-carousel :interval="5000" indicator-position="none" :height="dataHeight" arrow="always">
                  <el-carousel-item v-for="(gameSourceImgData,index) in gameImgDataList" :key="index">

                    <h3>
                      <img :src="gameSourceImgData.imgUrl" width="100%" height="100%"/>
                    </h3>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-row>
          </el-col>
          <el-col :span="9">
            <el-row class="dialog-boxthird">
              <div style="padding: 20px">
                <span class="dialog-title">游戏开服</span>
              </div>
              <div style="width:100%;height: 1px;background-color: #E9E9EA"></div>
              <div style="padding: 20px">
                <el-row class="dialog-boxthirdrow">
                  <el-col span="12" style="padding-left: 10px">
                    <div>开服时间</div>
                  </el-col>
                  <el-col span="12" style="padding-left: 10px">
                    <div>服务器名称</div>
                  </el-col>
                </el-row>
                <div v-if="getGameServerDataList!=null && getGameServerDataList.length > 0">
                  <el-row class="dialog-boxthirdrowtable" v-for="(item,index) in getGameServerDataList" :key="index">
                    <el-col span="12">
                      <div class="dialog-boxthirdrowimg">{{ item.startTime | formatDate('YYYY-MM-DD') }}</div>
                      <div v-if="getGameServerDataList.length-1 != index" style="border-right: 1px solid #eeeeee;

                                  height: 50px;
                                  position: absolute;
                                  margin-left: 22px;
                                  margin-top: -11px;
                              }">
                      </div>
                    </el-col>
                    <el-col span="12" class="dialog-boxthirdrowtext">
                      <div>{{ item.serverName }}</div>
                    </el-col>
                  </el-row>
                </div>
                <div v-else style="height: 100px; line-height: 100px; text-align: center">
                  <span style="color: #9B9B9B; font-size: 20px;">暂无数据</span>
                </div>
              </div>
            </el-row>


            <el-row class="dialog-boxthird" style="margin-top: 20px">
              <div style="padding: 20px">
                <span class="dialog-title">游戏礼包</span>
              </div>
              <div style="width:100%;height: 1px;background-color: #E9E9EA"></div>
              <div v-show="getGameGiftDataList != null && getGameGiftDataList.length > 0"
                   v-for="(item,index) in getGameGiftDataList" :key="index" @mouseenter="enterFun(index)"
                   @mouseleave="leaveFun(index)">
                <div :class="!show&& n == index ? 'pack-inner affter' : 'pack-inner'">
                  <p>{{ item.giftbagName }}</p>
                  <p v-show="!show && n == index ">{{ item.useDesc }}</p>
                  <p>剩余：<span style="color: #EC6D40">{{ item.stock / item.total * 100 }}%</span></p>
                </div>
                <div style="width:100%;height: 1px;background-color: #E9E9EA"></div>
              </div>
              <div v-show="getGameGiftDataList == null || getGameGiftDataList.length === 0" style="height: 100px; line-height: 100px; text-align: center">
                <span style="color: #9B9B9B; font-size: 20px;">暂无礼包数据</span>
              </div>
            </el-row>
          </el-col>
        </el-row>

      </div>
    </el-dialog>

    <el-dialog title="复制结果" :visible.sync="dialogTableVisible" customClass="customGameWidth">
      <div style="width:100%;height: 1px;background-color:rgb(187 187 187);margin-top: -20px"></div>
      <div class="dialog-two" v-clipboard:copy="url"
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"><span style="color: #1e9fff">下载链接：<span id="cpUrl">{{ url }} </span> </span></div>
      <!--<div class="dialog-two" v-if="subshow"><span style="color: #1e9fff" @click="subDoenUrl()">刷新</span></div>-->
      <div class="dialog-two"><span>复制成功,ctrl+v粘贴即可</span></div>
      <div class="dialog-two">
        <vue-qr
          :text="url"
        ></vue-qr>
      </div>
      <div class="dialog-two"><span>下载地址二维码</span></div>
    </el-dialog>


    <el-dialog title="链接时效设置" :visible.sync="dialogSxTableVisible" customClass="customGameWidth" @close="closedialogSx()">
      <el-form :model="sxForm" ref="sxForm" label-width="150px">
        <el-form-item label="访问次数:">
          <el-input v-model="sxForm.pastdeuCount" placeholder="请输入访问次数" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="失效分钟:">
          <el-input v-model="sxForm.pastdeuMinute" placeholder="请输入失效分钟" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="失效跳转URL：">
          <el-input style="width: 350px" type="textarea" :rows="5" clearable v-model="sxForm.refUrl"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="closedialogSx()">取 消</el-button>
              <el-button type="primary" :loading="loading" @click="postSetSx">确 定</el-button>
            </span>
    </el-dialog>


    <el-dialog title="复制结果" :visible.sync="dialogLdyTableVisible" customClass="customGameWidth" @close="closedialogLdy()">
      <div style="width:100%;height: 1px;background-color:rgb(187 187 187);margin-top: -20px"></div>
      <div class="dialog-two" v-clipboard:copy="ldyUrl"
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"><span style="color: #1e9fff">落地页链接：<span id="cpLdyUrl">{{ ldyUrl }} </span> </span></div>
      <div class="dialog-two"><span>复制成功,ctrl+v粘贴即可</span></div>
      <div class="dialog-two">
        <vue-qr
          :text="ldyUrl"
        ></vue-qr>
      </div>
      <div class="dialog-two"><span>下载地址二维码</span></div>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

import {
  addGamePromote,
  offShelfGamePromote,
  subcontractGamePromote,
  gameImgList,
  setGameSx,
  getGameDownLoadUrl
} from '@/api/game/gamePromote'
import {getGameServerList} from '@/api/game/gameServer'
import {getGameGiftPage} from '@/api/game/gameGift'
import VueQr from 'vue-qr'
import website from "@/config/website";
import {gameLinksettings, gamePromote} from "@/api/game/game";
import VueElementLoading from 'vue-element-loading'

export default {
  name: "index",
  components: {VueQr,VueElementLoading},
  data() {
    return {
      loading:false,
      exampleUrl: [{name: 1, fei: 2}, {name: 1, fei: 2}],
      url: '',
      ldyUrl:'',
      gameImgDataList: null,
      getGameServerDataList: null,
      getGameGiftDataList: null,
      landingPageUrl:website.landingPage,
      downloadUrl:website.downloadUrl,
      form:{
        gameId:''
      },
      subshow:false,
      dialogSxTableVisible: false,
      dialogLdyTableVisible: false,
      sxForm:{
        code:'',
        introduPageUrl:'',
        pastdeuCount:2,
        pastdeuMinute:10,
        refUrl:'',
        userId:0,
        gameId:0
      }
    }
  },
  props: {
    dataHeight: {
      type: String,
      default: '366px'
    },
    gameData: {
      type: Object,
      default() {
        return {}
      }
    },

    userId: {
      type: Number,
      default: 0
    },
    n: 0,
    show: true,
    dialogTableVisible: false,
    dialogFormll: false,
    activeName: {
      type: String,
      default: ''
    },

  }
  ,
  computed: {
    ...mapGetters(["dialogForm"]),
  },
  created() {
    console.log("adfsfsdf",this.gameData)
  },
  methods: {

    encodeBase64(data) {
      console.log("datta",data)
      let Base64 = require('js-base64').Base64
     return Base64.encode(data)
    },
    subDoenUrl(){
      this.form.gameId = this.gameData.gameVO.id
      gameLinksettings().then(res => {
        const data = res.data.data;
        if(Object.keys(data).length!=0){
          if(data.status!=1){
            this.subshow=true
            gamePromote(this.form).then(res => {
              const data = res.data.data;
              console.log("datta11",data)
              this.url = this.gameData.gameVO.introduPageUrl  + this.encodeBase64(this.downloadUrl+data.code)
            })
          }else{
            this.url = this.gameData.gameVO.introduPageUrl  + this.encodeBase64(this.downloadUrl+this.gameData.code)
          }

        }else{
          this.url = this.gameData.gameVO.introduPageUrl  + this.encodeBase64(this.downloadUrl+this.gameData.code)
        }
      });
    },
    postSetSx(){
      setGameSx(this.sxForm).then(res => {
        if(res.data.code == 200) {
          this.$message.success("设置成功")
          this.$emit("refreshData")
        } else {
          this.$message.warning("设置失败")
        }
      })
    },
    getSXUrl(){
      this.$confirm("确定生成一个新的落地页吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true
        /*this.loading = true
        this.dialogLdyTableVisible = true;
        this.ldyUrl = "http://www.qq.com"*/
        if(this.gameData.pastdeuCount > 0) {
          this.sxForm.pastdeuCount = this.gameData.pastdeuCount
          this.sxForm.pastdeuMinute = this.gameData.pastdeuMinute
        }
        this.sxForm.introduPageUrl = this.gameData.introduPageUrl
        this.sxForm.code = this.gameData.code
        this.sxForm.refUrl = this.gameData.refUrl

        getGameDownLoadUrl(this.sxForm).then(res => {
          this.loading = false
          if(res.data.code == 200) {
            this.sxForm = {
              code:'',
              introduPageUrl:'',
              pastdeuCount:2,
              pastdeuMinute:10,
              refUrl:'',
              userId:0,
              gameId:0
            }

            this.ldyUrl = res.data.msg
            this.dialogLdyTableVisible = true;
          } else {
            this.loading = false
            this.$message.warning("获取失败")
          }
        })
      });
    },
    setSX(){
      this.dialogSxTableVisible = true;
      if(this.gameData.pastdeuCount > 0) {
        this.sxForm.pastdeuCount = this.gameData.pastdeuCount
        this.sxForm.pastdeuMinute = this.gameData.pastdeuMinute
      }
      this.sxForm.introduPageUrl = this.gameData.introduPageUrl
      this.sxForm.code = this.gameData.code
      this.sxForm.refUrl = this.gameData.refUrl
      this.sxForm.userId = this.gameData.userId
      this.sxForm.gameId = this.gameData.gameId
    },
    closedialogSx(){
      this.dialogSxTableVisible = false;
      this.sxForm = {
        code:'',
        introduPageUrl:'',
        pastdeuCount:2,
        pastdeuMinute:10,
        refUrl:'',
        userId:0,
        gameId:0
      }
    },
    closedialogLdy() {
      this.dialogLdyTableVisible = false;
      this.ldyUrl = ''
    },
    getUrl(){
      this.dialogTableVisible = true
      this.form.gameId = this.gameData.gameVO.id
      gameLinksettings().then(res => {
        const data = res.data.data;
        if(Object.keys(data).length!=0){
          if(data.status!=1){
            this.subshow=true
            gamePromote(this.form).then(res => {
              const data = res.data.data;
              console.log("datta11",data)
              if(data.introduPageUrl!=''&&data.introduPageUrl!=null){
                console.log("datta11",1)
                this.url = data.introduPageUrl
              }else{
                console.log("datta11",2)
                this.url = this.gameData.gameVO.introduPageUrl  + this.encodeBase64(this.downloadUrl+data.code)
              }

            })
          }else{
            if(this.gameData.introduPageUrl!=''&&this.gameData.introduPageUrl!=null){
              console.log("datta11",3)
              console.log("this.gameData",this.gameData)
              this.url = this.gameData.introduPageUrl
            }else {
              console.log("datta11",4)
              this.url = this.gameData.gameVO.introduPageUrl + this.encodeBase64(this.downloadUrl + this.gameData.code)
            }
          }

        }else {
          if (this.gameData.introduPageUrl != '' && this.gameData.introduPageUrl != null) {
            console.log("datta11", 3)
            console.log("this.gameData", this.gameData)
            this.url = this.gameData.introduPageUrl
          } else {
            console.log("datta11", 5)
            this.url = this.gameData.gameVO.introduPageUrl + this.encodeBase64(this.downloadUrl + this.gameData.code)
          }
        }
      });
    },
    splitLabel(lab, sp) {
      return lab.split(sp)
    },

    addGameSourcePromoteHandle() {

      addGamePromote(this.userId, this.gameData.gameVO.id).then(res => {
        const data = res.data;
        if (data.code == 200) {
          this.$message.success("添加成功")

          if (data.data != null && data.data.length > 0) {
            this.$confirm('添加成功！ 是否同步添加该游戏对应的Android/iOS端？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              data.data.forEach(id => {
                addGamePromote(this.userId, id).then(() => {
                  this.$emit("refreshData")
                })
              })

            });
          }
          this.$emit("refreshData")
        } else {
          this.$message.error("添加失败")
        }

      })

    },

    offShelfGameSourcePromoteHandle() {
      offShelfGamePromote(this.userId, this.gameData.gameVO.id).then(res => {
        const data = res.data;
        if (data.code == 200) {
          this.$message.success("下架成功")
          this.$emit("refreshData")
        } else {
          this.$message.error("下架失败")
        }
      })
    },
    subcontractGameSourcePromoteHandle() {
      this.gameData.subpackage=3
      subcontractGamePromote(this.userId, this.gameData.gameVO.id).then(res => {
        const data = res.data;
        if (data.code == 200) {
          this.$message.success("请等待1-3分钟 打包分发中")
          // this.$emit("refreshData")
          this.$emit('timingRequest');
        } else {
          this.$message.error("申请失败")
        }
      })
    },
    osTypeName(osType) {
      if(osType == 1) {
        return 'ios'
      } else if (osType==2) {
        return 'android'
      }else {
        return '未知'
      }
    },

    conversionByte(limit) {
      let size = "";
      if (limit < 0.1 * 1024) {                            //小于0.1KB，则转化成B
        size = limit.toFixed(2) + "B"
      } else if (limit < 0.1 * 1024 * 1024) {            //小于0.1MB，则转化成KB
        size = (limit / 1024).toFixed(2) + "KB"
      } else if (limit < 0.1 * 1024 * 1024 * 1024) {        //小于0.1GB，则转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB"
      } else {                                            //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
      }

      const sizeStr = size + "";                        //转成字符串
      const index = sizeStr.indexOf(".");                    //获取小数点处的索引
      const dou = sizeStr.substr(index + 1, 2)            //获取小数点后两位的值
      if (dou == "00") {                                //判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size;
    }
    ,
    hand() {
      this.dialogFormll = true;

      if (this.gameImgDataList == null) {
        gameImgList(this.gameData.id).then(res => {
          this.gameImgDataList = res.data.data.records
        })
      }
      if (this.getGameServerDataList == null) {
        getGameServerList(1, 10, {"gameId": this.gameData.gameVO.id}).then(res => {
          this.getGameServerDataList = res.data.data.records
        })
      }
      if (this.getGameGiftDataList == null) {
        getGameGiftPage(1, 10, {"gameId": this.gameData.gameVO.id}).then(res => {
          this.getGameGiftDataList = res.data.data.records
        })
      }

    }
    ,
    onClose() {
      this.dialogFormll = true;

    }
    ,
    enterFun(index) {
      console.log('鼠标移入');
      this.show = false;
      this.n = index;

    }
    ,
    leaveFun(index) {
      console.log('鼠标离开');
      this.show = true;
      this.n = index;
    }
    ,
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.offShelfGameSourcePromoteHandle()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
// 复制成功时的回调函数
    onCopy() {
      this.$message.success("内容已复制到剪切板！")
    }
    ,
// 复制失败时的回调函数
    onError() {
      this.$message.error("抱歉，复制失败！")
    }
    ,
  }
}

</script>

<style lang="scss">
.el-cardal {

  padding: 20px 20px 12px 20px;
  border: 1px solid #DCDFE6;
  border-radius: 10px;
  /*background-color: #db1c1c;*/
  /*overflow: hidden;*/
  /* color: #303133; */
  //transition: .3s;
  width: 99%;


}
.el-cardal:hover{

  box-shadow: 0px 3px 12px 0px rgba(186, 186, 186, 0.5);

}
.dialogtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  margin-top: 10px;
  font-size: 12px;
  color: rgb(118, 131, 143);
}

/*.el-dialog__header {*/
/*  background: #606266;*/

/*}*/

/* 弹出层设置背景色 底部*/

.el-dialog {
  background-color: #E9E9EA !important;

}


.dialog-box {
  padding: 0;
  width: 1024px;
  margin: 0 auto;

}

.dialog-boxone {
  width: 100%;
  padding: 20px 20px 10px 20px;
  background: #FFFFFF;
}

.dialog-boxtwo {
  width: 100%;
  background: #FFFFFF;
}

.dialog-boxthird {
  /*margin-left: 20px;*/
  width: 100%;
  background: #FFFFFF;
}

.boxdialog {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 144px;
}

.dialog-boxonetext {
  margin-left: 5px;
  font-size: 14px;
  color: rgb(118, 131, 143);
}

.dialog-boxonetab {
  /*display: inline-block;*/
  font-size: 12px;
  margin-right: 10px;
  padding: 3px 15px;
  height: 21px;
  line-height: 21px;
  color: #fff;
  font-style: normal;
  text-align: center;
  background: #ffb230;
  border-radius: 11px;
}

.dialog-title {
  font-size: 20px;
  color: #000c17;
  margin-bottom: 20px;
}

.dialog-liteletitle {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #76838f;
  line-height: 1.8;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.dialog-boxthirdrow {
  height: 43px;
  background: #EDEDED;
  line-height: 43px;
  cursor: pointer;
}

.dialog-boxthirdrowtable {
  margin-top: 20px;
}

.dialog-boxthirdrowimg {
  position: relative;
  margin-left: 18px;
  padding-left: 25px;
  width: 111px;
  height: 30px;
  line-height: 30px;
  color: #ed6a3c;
  font-size: 14px;
  background-image: url();
  background-repeat: no-repeat;
  z-index: 999;
}

.dialog-boxthirdrowtext {
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;

}

.pack-inner {
  padding: 8px 20px 12px;
  font-size: 14px;
  color: #76838f;

  &.affter {
    background-color: #FAFAFA;
  }
}

.card-panel:hover {
  .dialog-boxthirdrowtable {
    background-color: #00a680;
    cursor: pointer;
  }
}

.dialog-two {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;

}

.popperclass {
  width: 200px;
  height: 400px;
}

.popperclassbig {
  width: 213px;
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

.customGameWidth {
  width: 30%;
  background-color: #FFFFFF !important;
}
</style>
